<template>
     <div :class="props.id" ref="Ele"  style="width: 100%;height: 100%;"></div>
</template>
<script setup lang="ts"> 
import {useEcharts} from '@/hooks/useEcharts';
import { defineProps,defineExpose, PropType,ref, onMounted, unref, watchEffect } from 'vue';
 
const Ele = ref<HTMLDivElement>();
const intanc = ref<any>();
const props = defineProps({
      id:String as PropType<String>,
      datas:{} as PropType<any>
})
onMounted(()=>{  
   intanc.value = useEcharts(document.querySelector(`.${props.id}`) as any,'light');
   updateEchart(props.datas)
}) 

 
const updateEchart = (data)=>{
     let intEchart = unref(intanc);
     intEchart.setOption(data ?? {},true); 
}
// 用于事件更新
defineExpose({
      updateEchart
}) 
</script>

<style>

</style>